$(function(){
  var mouseX = 0;   //鼠标移动的位置X
  var mouseY = 0;   //鼠标移动的位置Y
  var maxLeft = 0;  //最右边
  var maxTop = 0;   //最下边
  var markLeft = 0; //放大镜移动的左部距离
  var markTop = 0;  //放大镜移动的顶部距离
  var perX = 0; //移动的X百分比
  var perY = 0; //移动的Y百分比
  var bigLeft = 0;  //大图要移动left的距离
  var bigTop = 0;   //大图要移动top的距离

  //改变放大镜的位置
  function updataMark($mark){
    //通过判断，让小框只能在小图区域中移动
    if(markLeft<0){
      markLeft = 0;
    }else if(markLeft>maxLeft){
      markLeft = maxLeft;
    }


    if(markTop<0){
      markTop = 0;
    }else if(markTop>maxTop){
      markTop = maxTop;
    }

    //获取放大镜的移动比例，即这个小框在区域中移动的比例
    perX = markLeft/$(".small").outerWidth();
    perY = markTop/$(".small").outerHeight();
    
    bigLeft = -perX*$(".big").outerWidth();
    bigTop = -perY*$(".big").outerHeight();

    //设定小框的位置
    $mark.css({"left":markLeft,"top":markTop,"display":"block"});
  }

  //改变大图的位置
  function updataBig(){
    $(".big").css({"display":"block","left":bigLeft,"top":bigTop});
  }

  //鼠标移出时
  function cancle(){
    $(".box_big").css({"display":"none"});
    $(".mark").css({"display":"none"});
  }

  //鼠标小图上移动时
  function imgMouseMove(event){

    var $this = $(this);
    var $mark = $(this).children(".mark");
	$(".box_big").css({"display":"block"});
    //鼠标在小图的位置
    mouseX = event.pageX-$this.offset().left - $mark.outerWidth()/2;
    mouseY = event.pageY-$this.offset().top - $mark.outerHeight()/2;

    //最大值
    maxLeft =$this.width()- $mark.outerWidth();
    maxTop =$this.height()- $mark.outerHeight();
    markLeft = mouseX;
    markTop = mouseY;

    updataMark($mark);
    updataBig();
  }


  $(".small").bind("mousemove",imgMouseMove).bind("mouseleave",cancle);
})





$(function(){
	$('.prop').mouseover(function(){
		$('.prop').css({"z-index":"100"});
	})
})
